<template>
  <div class="page clipPath2">
    <div class="dialog">dialog</div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.clipPath2 {
  background-color: skyblue;
  .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    background-color: #fff;
    text-align: center;
    line-height: 80px;
    font-size: 20px;
    color: #3c3c3c;
    text-transform: uppercase;
    letter-spacing: 3px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 80%, 80% 80%, 70% 80%, 0 80%);
    transition: all .5s;
  }
  .dialog:hover {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 80%, 90% 100%, 70% 80%, 0 80%);
  }
}
</style>